<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单发货单</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
    <script type="text/javascript">
        function myprint() {
            //直接调用浏览器打印功能
            bdhtml = window.document.body.innerHTML;
            //定义打印区域起始字符，根据这个截取网页局部内容
            sprnstr = "<!--startprint-->"; //打印区域开始的标记
            eprnstr = "<!--endprint-->";   //打印区域结束的标记
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            //开始打印
            window.print();
            //还原网页内容
            window.document.body.innerHTML = bdhtml;
        }

        function barcodeGen() {
            var barvalue = $("#billNo").val();
            if (barvalue == "") {
                alert("请输入条形码字符串！！")
            } else {
                $("#bcode").JsBarcode(barvalue);
            }
        }

        $(function () {
            barcodeGen();
        })
    </script>


</head>
<body>
<!--startprint-->
<style type="text/css">
    .record-box {
        position: relative;
        width: 900px;
        padding: 0 5px;
        font-size: 13px;
        color: #787878;
    }

    .record-head {
        margin: -20px 0 80px 0;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
    }

    .record-head span {
        float: left;
    }

    .record-head i {
        float: right;
        font: normal 28px/30px Tahoma;
        cursor: pointer;
    }

    .record-code {
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -110px;
        width: 220px;
        font-size: 14px;
        text-align: center;
    }

    .record-code img {
        width: 100%;
        display: block;
    }

    .record-code span {
        line-height: 2;
    }

    .record-box h2 {
        font-weight: normal;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .record-info {
        line-height: 34px;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .record-info span {
        float: left;
        width: 33.3%;
        text-align: left;
    }

    .record-info span:nth-child(3n-1) {
        padding-left: 9%;
        width: 35.66%;
    }

    .record-info span:nth-child(3n) {
        width: 20%;
    }

    .record-info span:last-child {
        width: 100%;
    }

    .record-table {
        overflow-y: auto;
    }

    .record-table table {
        width: 100%;
    }

    .record-table th, .record-table td {
        padding: 10px 0;
        font-size: 13px;
        text-align: center;
        border: 1px solid #787878;
    }

    .record-table th {
        padding: 5px 0;
    }

    .record-button {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 10px;
        text-align: center;
    }

    .record-button a {
        border: 1px solid #787878;
        padding: 10px 15px;
        font-size: 14px;
        color: #787878;
    }
</style>
<div class="record-box">
    <div class="record-head"><span>电商ERP系统</span><b></b></div>
    <div class="record-code">
        <img id="bcode" src=""/>
        <input type="hidden" id="billNo" th:value="${order.orderSn}"/>
        <!--        <span id="r-code">CG190411100335401</span>-->
    </div>
    <h2>发货单</h2>
    <div class="record-info">
        <span>订单号：<i id="r-number" th:text="${order.orderSn}">CG190411100335401</i></span>
        <span>店铺：
            <i id="r-number1" th:text="${order.shopName}">CG190411100335401</i>--
            <i  th:if="${order.shopType == 5}">拼多多</i><i  th:if="${order.shopType == 4}">淘宝</i><i  th:if="${order.shopType == 6}">抖音</i>
        </span>
        <span>&nbsp;</span>
        <span>下单时间：<i id="r-time" th:text="${order.orderTime}">2019-04-11  19:20:20</i></span>
        <span >发货时间：<i th:text="${order.deliveryTime }"></i></span>
        <span>&nbsp;</span>
        <span >发货方式：
            <i th:if="${order.sendType == 1 }" style="color: red;">供应商代发</i>
            <i th:if="${order.sendType == 9 }">自有仓库发货</i>
        </span>
        <span>订单备注：<i id="r-sellerMemo" th:text="${order.remark}">韵达快递</i></span>
        <span>&nbsp;</span>
        <!--        <span>订单来源：<i id="r-number1" th:text="${T(com.b2c.entity.erp.enums.ErpOrderSourceEnum).getName(order.source)}">CG190411100335401</i></span>-->

        <span>收货人：<i id="r-people" th:text="${order.consignee}">张三丰</i>&nbsp;<i id="r-phone" th:text="${order.mobile}">15999600065</i></span>
        <span>省市区：<i th:text="${order.province}">1</i>
            <i th:text="${order.city}">1</i>
            <i th:text="${order.area}">1</i>
            <i th:text="${order.street}">1</i>
        </span>
        <span></span>
        <!-- <span>收货地址：<i id="r-address" th:text="${order.address}">深圳市南山区大冲商务中心大冲商务中心D座2301</i></span> -->
      
        <span>物流公司：<i th:text="${order.logisticsCompany}"></i>&nbsp;</span>
        <span>物流单号：<i th:text="${order.logisticsCode}"></i></span>
        <span>&nbsp;</span>
        
    </div>
    <div class="record-table">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>图片</th>
                <th>款号</th>
                <th>SKU编码</th>
                <th>商品名</th>
                <th>规格</th>
                <th>数量</th>

            </tr>
            </thead>
            <tbody id="r-table">
            <tr th:each="item:${order.items}">
                <td th:text="${itemStat.index+1}">1</td>
                <td >
                    <img th:src="${item.goodsImg}" width="50px" height="50px" />
                </td>
                <td th:text="${item.goodsNumber}">1</td>
                <td th:text="${item.goodsSpecNumber}">1</td>
                <td th:text="${item.goodsName}"></td>

                <td><span th:text="${item.goodsSpec}"></span>&nbsp;
 
                </td>

                <td th:text="${item.quantity}">1</td>

            </tr>

            </tbody>
        </table>
    </div>

</div>
<!--endprint-->
<div>
    <div class="record-button"><a href="javascript:;" onclick="myprint()">打印</a></div>
</div>
</body>
</html>